Complex historic interface (2020)
Duty description
In Stratio, I was needed to redesign some different option that were designed in different tabs but they had to be together because the user was quite lost when he was going to look for information.
I was the responsible of carrying out this duty during a spring (2 weeks). The duty consisted of binding the deployments' historic, the healthchecks of every deployment (with their status, actions and a visible description when something failed), the tasks of the service and a sub-header with some information that has to be visible together.
It was not too easy because there were a lot of information to show but it has to be in a clear and clean way for the user to be understood.
Subheader information
First of all, I did the sub-header in the minimum space to make it clear and easy to understand. I put the 5 points that were indicated: state of health, quantity of CPUs, quantity of memory, disk's space and tasks running for the service.
Tasks and History tabs separation
After that, I decided to separate tasks and deployment history in two tabs because both were related to the service and the information for every one was different, so they could be separated clearly.
The Tasks tab was only a table with a list of tasks and some information allocated in columns. The History tab was the main problem.
1st column: Deployments' historic
I made two different columns. The first one for a list with all the deployments made for the service shown in the header. And the second one to show the healthchecks, and some other information, related to the deployment selected in the other column.
In the list of the deployments I had to show the state of the deployment and which one was the current version. I tried to make it so visual as I could because there were not too much space for anything more. In the "..." option, which is shown when a row is selected or the user is hovering in the list, there are some options like "configuration" or "delete".
2nd column: Healthchecks
I made a little table where all the information is shown. I would have preferred to show the messages of the failed healthchecks in a tooltip over the status but it was required like that. The user who is going to use this tool will find this information faster and clear like that, so that is why it was done in that way.
The status is shown so visual as it could, following the specifications that I received.
